<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="home">
    <!-- 我是 pc 首页 -->
    <div class="homeBanner">
      <el-carousel height="600px">
        <el-carousel-item>
          <img src="@/assets/pc/banner.png">
          <div class="text-ww">
            <h1>体育运动场馆数智化整体解决方案</h1>
            <h2>SAAS + 大数据 + 赛事</h2>
            <el-button class="white-btn" round @click="goManage">免费试用</el-button>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="box quickArea">
      <div class="quickBox">
        <img src="@/assets/pc/btn1.png"/>
        场馆入驻
        <p><span><count-to :startVal="0" :endVal="num1" :duration="2000"></count-to></span>家</p>
      </div>
      <div class="quickBox" @click="goMatch">
        <img src="@/assets/pc/btn2.png"/>
        举办赛事
        <p><span><count-to :startVal="0" :endVal="num2" :duration="2000"></count-to></span>场</p>
      </div>
      <div class="quickBox" @click="goTrain">
        <img src="@/assets/pc/btn3.png"/>
        开设培训
        <p><span><count-to :startVal="0" :endVal="num3" :duration="2000"></count-to></span>场</p>
      </div>
      <div class="quickBox" @click="goTrain">
        <img src="@/assets/pc/btn4.png"/>
        覆盖城市
        <p><span><count-to :startVal="0" :endVal="num4" :duration="2000"></count-to></span>座</p>
      </div>
      <div class="quickBox" @click="goTrain">
        <img src="@/assets/pc/btn5.png"/>
        累计用户
        <p><span><count-to :startVal="0" :endVal="num5" :duration="2000"></count-to></span>人</p>
      </div>
    </div>
    <div class="box text-center">
      <h2>专业场馆解决方案</h2>
      <h4>打造最新场馆管理模式 提升场馆预约体验</h4>
      <div class="flex1">
        <div class="videoBox">
          <video autoplay loop muted src="/jj.mp4">
            <source src="/jj.mp4"/>
          </video>
        </div>
        <div class="rightp">
          <p class="aleft">
            基于如今互联网的发展，不仅能够在平台上宣传场馆，还能够帮助用户更加便捷得的实现线上预约等服务。<br/>
            场馆预约订场系统，能够及时为用户提供场馆的相关信息，包括场馆位置，场馆硬件设备，场馆的服务等，同时结合系统线上服务的功能，完善用户线上预约场地的各种需求体验。
          </p>

          <ul>
            <li>
              <img src="@/assets/pc/k1.png"/>
              <div class="info">
                <h3>一键建馆  灵活定价</h3>
                <p>基于SAAS结构，在J系统5分钟完成小程序的配置，实现建馆。支持多种会员定价策略，满足场馆运营需求。</p>
              </div>
            </li>
            <li>
              <img src="@/assets/pc/k2.png"/>

              <div class="info">
                <h3>全渠道会员体系搭建</h3>
                <p>可自主搭建会员体系，设置会员等级、充值模式、收费标准等，实现会员1v1 VIP服务。</p>
              </div>
            </li>
            <li>
              <img src="@/assets/pc/k3.png"/>
              <div class="info">
                <h3>小程序灵活预订场馆</h3>
                <p>根据会员等级查看场地价格，完成场地的灵活预订、退订，利用微信扫码实现快速进场。</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box text-center">
      <h2 style="margin: 80px 0 0;">专业赛事解决方案</h2>
      <h4>为综合性运动会、各种项目的赛制提供专属赛事官网、赛事报名、数据分析</h4>
      <div class="flex2">
        <div class="part2Item">
          <img src="@/assets/pc/ss01.png"/>
          <img class="dwn" src="@/assets/pc/ss01_dwn.png"/>
          <h3>创建专属赛事官网</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss02.png"/>
          <img class="dwn" src="@/assets/pc/ss02_dwn.png"/>
          <h3>全类型赛事项目维护 </h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss03.png"/>
          <img class="dwn" src="@/assets/pc/ss03_dwn.png"/>
          <h3>PC/小程序赛事报名</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss04.png"/>
          <img class="dwn" src="@/assets/pc/ss04_dwn.png"/>
          <h3>赛事费用收缴</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss05.png"/>
          <img class="dwn" src="@/assets/pc/ss05_dwn.png"/>
          <h3>赛事报名审核</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss06.png"/>
          <img class="dwn" src="@/assets/pc/ss06_dwn.png"/>
          <h3>赛事进程跟踪</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss07.png"/>
          <img class="dwn" src="@/assets/pc/ss07_dwn.png"/>
          <h3>赛事日程提醒</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss08.png"/>
          <img class="dwn" src="@/assets/pc/ss08_dwn.png"/>
          <h3>一键导出报项信息</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss09.png"/>
          <img class="dwn" src="@/assets/pc/ss09_dwn.png"/>
          <h3>报名数据分析</h3>
        </div>
        <div class="part2Item">
          <img src="@/assets/pc/ss10.png"/>
          <img class="dwn" src="@/assets/pc/ss10_dwn.png"/>
          <h3>参赛团体数据分析</h3>
        </div>
      </div>
    </div>
    <div class="box text-center" style="max-width: 1400px;">
      <h2 style="margin: 80px 0 0;">入驻场馆</h2>
      <h4>提升场馆利用、推动全民健身、发展文化体育产业</h4>
      <div class="flex3">
        <img src="@/assets/pc/cg01.png"/>
        <img src="@/assets/pc/cg02.png"/>
        <img src="@/assets/pc/cg03.png"/>
        <img src="@/assets/pc/cg04.png"/>
        <img src="@/assets/pc/cg05.png"/>
      </div>
    </div>

    <!-- <router-link to="/ven/venue/priceTemplate">跳转</router-link> -->
  </div>
</template>

<script setup>
import { CountTo } from 'vue3-count-to';
import { ref } from 'vue'
const router = useRouter()
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const num1 = ref(12)
const num2 = ref(56)
const num3 = ref(11)
const num4 = ref(23)
const num5 = ref(20088)

function goMatch() {
  router.push({ name: 'matchList' })
}
function goTrain() {
  router.push({ name: 'trainPcList' })
}
function goManage() {
  router.push({ })
}
</script>

<style scoped lang="scss">
.videoBox{width: 540px;
  video{width: 90%;margin: auto;}
}
.home{    background: #fcfcfc;}
  .box{max-width: 1200px;}
  .text-ww{
    color: #FFFFFF;    position: absolute;left: 0;    top: 30%;
    width: 100%;
    text-align: center;
    h1{
      font-size: 55px;}
    h2{color: #FFFFFF;
      font-weight: 300;
      font-size: 48px;}
    .white-btn{width: 200px;
      font-size: 18px;
      height: 45px;
      color: #2BD383;}
  }
  h2{
    color: #1A1E1A;
    font-size: 36px;}
  h4{
    font-size: 20px;
    color: #95A1A6;}
  .quickArea{background: #FFFFFF;max-width: 1200px;    position: relative;
    top: -50px;
    min-height: 230px;display: flex;justify-content: space-around;
    box-shadow: 0px 0px 24px 1px rgba(99,99,99,0.22);
    border-radius: 20px;padding: 30px 0 0}
	.quickBox{height: 160px;text-align: center;border-right: 1px solid #eee;
    margin: 0;cursor: pointer;width: 20%;
    font-size: 20px;
    img{margin:0 auto 20px}
    p{font-size: 20px;color: #7B7F83;    margin:10px 0 0;}
    span{font-size: 44px;font-weight: bold;color: #2ED981;margin-right: 5px;}
  }
  .quickBox:last-child{border-right: none;}
  .flex1{display: flex;
    .rightp{width: 670px;position: relative;padding-top: 100px;}
    .rightp::before{content: '';height: 2px;
      background: #2ED981;    display: block;
      width: 68px;
      border-radius: 1px;}
    .aleft{text-align: left;
      line-height: 36px;
      font-size: 18px;}
    li{display: flex;align-items: center;margin: 0 0 20px;
      img{width: 60px;height: 60px;}
      .info{text-align: left;padding-left: 30px;
        h3{
          font-size: 24px;}
        p{
          color: #7B7F83;
          font-size: 16px;}
      }
    }
  }
  .flex2{display: flex;flex-wrap: wrap;    padding: 20px;
    box-shadow: 0px 0px 24px 1px rgba(99,99,99,0.22);
    border-radius: 15px;    margin-top: 45px;}
  .flex3{display: flex;justify-content: center;margin: 0 0 30px;
    img{transition: all ease-in 0.2s;transform: translateY(0px);}
    img:hover{transform: translateY(-10px);}
  }
  .part2Item{width: 20%;padding: 15px 0;
    .dwn{display: none}
    h3{font-size: 18px;color: #29343C;}
    img{width: 70px;height: 70px;border-radius: 50%;margin: auto}
    &:hover{
      img{display: none;}
      img.dwn{display: block;}
    }
  }
</style>
